<div class="card external-domain mb-4" id="<%= id %>-field">
  <div class="card-divider external-domain-divider">
    <h2 class="card-title flex items-center">
      <span class="flex items-center gap-x-2"><%== icon("drag-move-2-fill") %></span>
      <span><%= t(".external_domain") %></span>

      <div class="flex items-center ml-auto gap-x-4">
        <button class="button button__xs button__transparent-secondary small alert move-up-question button--title">
          <%= icon("arrow-up-line") %>
          <span class="hidden md:block"><%= t(".up") %></span>
        </button>

        <button class="button button__xs button__transparent-secondary small alert move-down-question button--title">
          <%= icon("arrow-down-line") %>
          <span class="hidden md:block"><%= t(".down") %></span>
        </button>

        <button class="button button__xs button__transparent-secondary small alert remove-external-domain button--title">
          <%= icon("delete-bin-line") %>
          <span class="hidden md:block"><%= t(".remove") %></span>
        </button>
      </div>
    </h2>
  </div>

  <div class="card-section">
    <div class="grid-x">
      <div class="cell">
        <div class="row column">
          <%= form.text_field :value %>
        </div>
      </div>
    </div>
    <%= form.hidden_field :id %>
    <%= form.hidden_field :position, value: form.object.position || 0 %>
    <%= form.hidden_field :deleted %>
  </div>
</div>
